<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONFormData</title>

  <style>
    form {
      margin: 20px;
    }
    .field {
      margin: 10px 0;
    }
  </style>
</head>
<body>

  <form enctype='application/json' action="../rest/nihao/json" method="post">  
      <input name="name"/><br/> 
      <select name=gender>
       <option value="man">man</option>      
       <option value="female">female</option>
      </select><br/> 
      <button type="submit">Submit</button>  
  </form>
    <div id="result"></div>
  <script src="json-formdata.js"></script>
  <script>    
    var form = document.querySelector('form');
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      var action=e.target.action;
      var xhr = new XMLHttpRequest();      
      xhr.open('POST', action);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify(new JSONFormData(form).formData));
      xhr.addEventListener('loadend', function() {
    	  var resp= xhr.responseText;
                       document.getElementById("result").innerHTML=resp;    	  
      }, false);
    }, false);
  </script>

</body>
</html>
